<template>
	<div id="app-footer">
		<ul>
			<router-link to="/" tag="li" exact>
				<div class="icon-place">
					<i class="iconfont icon-home"></i>
				</div>
				<div class="text-place">首页</div>
			</router-link>
			<router-link to="/good-categories" tag="li">
				<div class="icon-place">
					<i class="iconfont icon-category"></i>
				</div>
				<div class="text-place">商品分类</div>
			</router-link>
			<router-link to="/cart" tag="li">
				<div class="icon-place">
					<i class="iconfont icon-cart"></i>
				</div>
				<div class="text-place">购物车</div>
			</router-link>
			<router-link to="/me" tag="li">
				<div class="icon-place">
					<i class="iconfont icon-user"></i>
				</div>
				<div class="text-place">我的</div>
			</router-link>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'app-footer',
}
</script>

<style scoped>
	#app-footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		border-top: 1px solid #f3f3f3;
		padding: 3px 0px;
		text-align: center;
		background-color: #f8f8f8;

	}

	#app-footer ul {
		overflow: hidden;
	}

	#app-footer ul li {
		float: left;
		width: 25%;
		color: #757474;
	}

	#app-footer ul li.active {
		color: #b21014;
	}

	#app-footer ul li .icon-place {
		margin-bottom: 3px;
	}

	#app-footer .iconfont {
		font-size: 20px;
	}

	#app-footer .text-place {
		font-weight: 300;
	}
</style>